<template>
  <div class="animate-fadeIn">
    <div class="mb-6">
      <h2 class="text-2xl font-bold cyber-text mb-2">执行任务</h2>
      <p class="text-gray-400">启动和监控任务执行</p>
    </div>
    
    <div class="space-y-6">
      <!-- 任务执行配置 -->
      <div class="glass-effect rounded-xl p-6 tech-card">
        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
          <i class="fas fa-play-circle mr-2"></i>任务执行配置
        </h3>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">选择任务</label>
            <select class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all">
              <option>Web登录流程测试</option>
              <option>API接口性能测试</option>
              <option>移动端兼容性测试</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">执行模式</label>
            <select class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all">
              <option>立即执行</option>
              <option>定时执行</option>
              <option>条件触发</option>
            </select>
          </div>
        </div>
        
        <div class="mt-6 flex justify-center">
          <button class="cyber-button px-8 py-4 text-white rounded-xl hover-glow transition-all duration-300 text-lg">
            <i class="fas fa-rocket mr-3"></i>启动执行
          </button>
        </div>
      </div>

      <!-- 实时监控 -->
      <div class="glass-effect rounded-xl p-6 tech-card">
        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
          <i class="fas fa-desktop mr-2"></i>实时监控台
        </h3>
        <div class="bg-gray-900 rounded-lg p-4 border border-gray-600 data-stream h-80 overflow-y-auto">
          <div class="font-mono text-sm space-y-2">
            <div class="text-green-400">[10:30:25] 任务初始化完成</div>
            <div class="text-blue-400">[10:30:26] 开始执行测试用例: 用户登录验证</div>
            <div class="text-green-400">[10:32:56] ✅ 用户登录验证 - 通过</div>
            <div class="text-yellow-400 animate-pulse">[10:34:10] 🔄 执行中...</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 执行任务页面
</script>

